<template>
	<div>
		<el-button @click="addDept">添加</el-button>
		
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <span>
			 <el-form ref="form" :model="form" label-width="80px">
			   <el-form-item label="部门名称">
			     <el-input v-model="form.dname"></el-input>
			   </el-form-item>
			   <el-form-item label="地址">
			     <el-select v-model="form.loc" placeholder="请选择地址">
			       <el-option label="北京" value="北京"></el-option>
			       <el-option label="上海" value="上海"></el-option>
				    <el-option label="郑州" value="郑州"></el-option>
			     </el-select>
			   </el-form-item> 
			  
			  <el-form-item>
			      <el-button type="primary" @click="onSubmit">立即创建</el-button>
			      <el-button>取消</el-button>
			    </el-form-item>
			  </el-form>
			  
			  
			  
		  </span>
		 <!-- <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span> -->
		</el-dialog>
		
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column prop="deptno" label="编号">
			</el-table-column>
			<el-table-column prop="dname" label="名称">
			</el-table-column>
			<el-table-column prop="loc" label="地址">
			</el-table-column>
		</el-table>
	</div>
</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	import qs from 'qs'
	export default {
		methods: {
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 === 0) {
					return 'warning-row';
				} else if (rowIndex % 2 === 1) {
					return 'success-row';
				}
				return '';
			},
			queryData() {
				// 向后台发出请求 返回数据
				this.$axios.get("dept").then(r => {
					// 
					this.tableData = r.data.t;
					//[{"deptno":1,"dname":"学术部","loc":"郑州"}]
					//alert(JSON.stringify(this.tableData))
				})

			},
			 handleClose(done) {
			        this.$confirm('确认关闭？')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
			      },
			addDept(){
				this.dialogVisible=true;
			},
			onSubmit(){
				//alert("提交");
				// 发出请求
				this.$axios.post("addDept",qs.stringify(this.form)).then(r=>{
					
					 this.$message({
						 showClose: true,
					          message: r.data.msg,
					          type: 'success'
					        });
					this.dialogVisible=false;
					// 刷新数据
					this.queryData();
					
				})
			}
		},
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				form:{}
			}
		},
		created() {
			this.queryData();
		}
	}
</script>
